<template>
  <el-form>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-col :span="12">
          <el-form-item label="位置经度" prop="lng">
            <el-input
              v-model="model.lng"
              type="number"
              class="input_number"
              @mousewheel.native.prevent
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="位置维度" prop="lat">
            <el-input
              v-model="model.lat"
              type="number"
              class="input_number"
              @mousewheel.native.prevent
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <baidu-map
            class="bm-view"
            :scroll-wheel-zoom="true"
            :center="center"
            :zoom="zoom"
            @ready="createMap"
            ak="xxx">
            <bm-view style="width:100%; height:400px;flex:1"></bm-view>
            <!-- 搜索-->
            <!-- <bm-local-search :keyword="model.address" :auto-viewport="true"
                             style="display:block"></bm-local-search> -->
            <!--标记-->
            <bm-marker :position="{lng: model.lng, lat: model.lat}"/>

            <bm-control :offset="{width: '10px', height: '10px'}">
              <bm-auto-complete v-model="model.address" :sugStyle="{zIndex: 999999}">
                <!-- <input type="text" placeholder="请输入搜索关键字" class="map_serach_input"> -->
                <el-input v-model="model.address" type="text" placeholder="请输入地名关键字" clearable>
                  <!-- <i slot="prefix" class="el-input__icon el-icon-search" /> -->
                </el-input>
              </bm-auto-complete>
            </bm-control>
            <!--搜索后自动显示结果点-->
            <bm-local-search :keyword="model.address" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
          </baidu-map>

          <!-- <el-input v-model="model.address" placeholder="搜索地点"
                    style="margin-left: 10px;width: 200px;position: absolute;top: 25%;opacity: 0.9"
                    prefix-icon="el-icon-search"></el-input> -->
        </el-col>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="12">
        <el-col :span="12">
          <el-form-item label="位置经度" prop="lng">
            <el-input
              v-model="model.lng"
              type="number"
              class="input_number"
              @mousewheel.native.prevent
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="位置维度" prop="lat">
            <el-input
              v-model="model.lat"
              type="number"
              class="input_number"
              @mousewheel.native.prevent
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <baidu-map class="map" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
          </baidu-map>
        </el-col>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  import {BaiduMap,BmView,BmMarker,BmControl,BmAutoComplete,BmLocalSearch,BmGeolocation} from "vue-baidu-map";
  export default {
    components: {
      BaiduMap,
      BmMarker,
      BmView,
      BmControl,
      BmAutoComplete,
      BmLocalSearch,
      BmGeolocation,
    },
    data () {
      return {
        BMap: null,
        map: null,
        center: {lng:117.414961, lat:40.051539,},
        zoom: 16,
        model: {
          lng: 117.414961,
          lat: 40.051539,
          address: ''
        }
      }
    },
    methods: {
      createMap ({BMap, map}) {
        this.BMap=BMap;
        this.map=map;
        // 百度地图API功能
        this.center.lng=117.414961; //定义地图中心点（在添加状态无数据时，默认为蓟州区政府）
        this.center.lat=40.051539;
        this.zoom=16; //缩放，15基本上就可以看附近的一些街道了
        // var mapStyle={style:"midnight"};
        // map.setMapStyle(mapStyle);
        map.setMapStyle({style:'dark'});

        var that= this;
        map.addEventListener('click',function(e){ //定义地图点击取经纬度事件
          that.model.lng=e.point.lng;
          that.model.lat=e.point.lat;
        })
        map={...map};

        // 区域图
        // var datas = new Array('徐州市-#665599')
        // var bdary = new BMap.Boundary()
        // for (var i = 0; i < datas.length; i++) {
        //   getBoundary(datas[i], bdary)
        // }

        // 设置区域图
        // function getBoundary (data, bdary) {
        //   data = data.split('-')
        //   bdary.get(data[0], function (rs) {
        //     // 获取行政区域
        //     var count = rs.boundaries.length // 行政区域的点有多少个
        //     // var pointArray = []
        //     for (var i = 0; i < count; i++) {
        //       var ply = new BMap.Polygon(rs.boundaries[i], {
        //         strokeWeight: 2,
        //         strokeColor: '#ff0000',
        //         fillOpacity: 0.1,
        //         fillColor: data[1]
        //       }) // 建立多边形覆盖物
        //       map.addOverlay(ply) // 添加覆盖物
        //     }
        //   })
        // }
      }
    }
  }
</script>
<style scoped>
.map_serach_input{
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
}
</style>
